<template>
  <div style="box-sizing: border-box;padding: 10px">
    <el-page-header @back="$router.go(-1)" content="视频上传">
    </el-page-header>
    <br>

    <div id="upload">
      <h3>选择视频</h3>
      <el-upload
          name="multipartFiles"
          accept=".mp4,.avi"
          :headers="header"
          :data="upData"
          :limit="1"
          ref="upload"
          class="upload-demo"
          :auto-upload="false"
          :on-error="fail"
          :on-success="success"
          :before-upload="upBefore"
          drag
          :action="baseUrl+'/company/uploadData/'+cId"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传mp4/avi文件，且不超过500MB</div>
      </el-upload>

    </div>
    <h3>选择一个默认封面<span style="font-weight: 300;font-size:14px;font-style: italic">(你选择了封面{{upData.coverCode+1}})</span></h3>
    <div id="photo" v-for="(item,index) in imgs">
      <div @click="select(index)" :key="index" :class="upData.coverCode!=index?'img':'active'"><img :src="item.url" alt=""></div>
      <br><br><br>
    </div>
    <br><br><br><br><br><br>
    <div style="margin-top: 100px;">
      <h3>填写视频标题<span style="font-weight: 300;font-size:14px;font-style: italic">(你填写的视频标题是:"{{upData.title}}")</span></h3>
      <el-input show-word-limit maxlength="18" style="width: 100%" v-model="upData.title"></el-input>
    </div>
    <br><br><br><br>
    <el-button style="width: 100%;" @click="submit" type="primary" >上传视频</el-button>
  </div>
</template>

<script>
import {Message} from 'element-ui'
import {baseUrl} from "@/api/baseUrl";

export default {
  name: "uploadVideo",
  data(){
    return{
      baseUrl:baseUrl,
      upData:{
        coverCode:0,
        title:'',
      },
      header:{
        TOKEN:this.$store.getters["user/getToken"]
      },
      cId:this.$store.getters["user/getUser"].uid,
      imgs:[
        {url:require('@/assets/img/tab1.jpg')},
        {url:require('@/assets/img/tab2.jpg')},
        {url:require('@/assets/img/tab3.jpg')}
      ],
      active:false
    }
  },
  created() {

  },
  methods:{
    getCid(){
      return localStorage.getItem("userId")
    },
    select(index){
      this.upData.coverCode=index
    },
    success(response){
      if(response.code==100){
        Message.success(`上传视频"${this.upData.title}"成功!`)
        this.$router.go(-1)
        console.log(response)
      }else {
        Message.warning(response.msg)
        console.log(response)

      }

    },
    upBefore(file){
      let testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'mp4'
      const extension2 = testmsg === 'avi'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if(!extension && !extension2) {
        Message.warning("上传文件只能是 mp4/avi格式!")
        return false
      }else {
        return true
      }
    },
    fail(response){
      Message.error("上传视频失败!")
      console.log(response)
    },
    submitUpload() {
      if (!this.upData.title){
        Message.warning("标题不能为空~")
      }else
        this.$refs.upload.submit();
    },
    submit(){
      console.log(this.level);
      this.submitUpload()

    }
  }
}
</script>

<style scoped>
#upload{
  float: left;
  width: 250px;
  height: 300px;
  /*border: 1px dotted deepskyblue;*/
}
#photo{
  float: left;
}
img{
  width: 100%;
  height: 100%;
  transition: all .1s;
}

img:hover{
  transform: scale(1.2,1.3);

}
.img{
  float: left;
  width: 160px;
  height: 140px;
  margin-right: 20px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  /*transition: all 1s;*/
}
.active{
  float: left;
  width: 160px;
  height: 140px;
  margin-right: 20px;
  box-sizing: content-box;
  cursor: pointer;
  overflow: hidden;
  border: #1a51f6 2px solid;
  /*transition: all .3s;*/
}
.img:hover{
  /*border: 2px solid blue;*/
}
/deep/ .el-upload-dragger{
  width:200px;
  height: 140px;
}

</style>
